import {defineComponent, onMounted, reactive, ref} from 'vue'
import SearchFrom from "./comp/SearchForm"
import {header, operateBtn} from "./data"
import {storeToRefs} from "pinia";
import TableList from "@/components/TableList";
import Dialog from ".//comp/Dialog";
import {ElMessage, ElMessageBox} from "element-plus";
import {CommentsStore} from "@/stores/comments";
import {formatDateTime, overflowHidden} from "@/utils/utils";

export default defineComponent({
    setup() {
        // 用comments数据仓库
        const comments_store = CommentsStore()
        // 显示弹出框
        const visible = ref(false)
        // 是否为详情页面
        const isDetail = ref(false)
        const showImage = ref(false)
        const diaTitle = ref("")
        const total = ref(0)
        // 从仓库中获取数据
        let {commentsList, commentsInfo} = storeToRefs(comments_store)
        // 搜索参数
        const queryParams = reactive({
            comments_name: undefined,
            pageNum: 1,
            pageSize: 10
        })

        const currentId = ref(undefined)

        // 获取评论列表
        const handleQuery = async () => {
            const res = await comments_store.getCommentsList(queryParams)
            total.value = res.total
        }

        // 改变页码大小
        const handleSizeChange = async (val) => {
            queryParams.pageSize = val
            await handleQuery()
        }

        // 改变当前页
        const handleCurrentChange = async (val) => {
            queryParams.pageNum = val
            await handleQuery()
        }

        // 点击编辑
        const handleEdit = async (id) => {
            await comments_store.getCommentsInfo(id)
            currentId.value = id
            visible.value = true
            diaTitle.value = "编辑评论"
            isDetail.value = false
        }

        // 点击查看详情
        const handleDetail = async (id) => {
            await handleEdit(id)
            await comments_store.getCommentsInfo(id)
            diaTitle.value = "查看详情"
            visible.value = true
            isDetail.value = true
        }

        // 关闭弹出框
        const closeDia = () => {
            commentsInfo.value = {}
            visible.value = false
        }

        // 保存弹出框
        const saveDia = async () => {
            const res = await comments_store.updateComments(currentId.value, commentsInfo.value)
            closeDia()
            if (res) {
                ElMessage.success("修改成功")
                await handleQuery()
            } else {
                ElMessage.error("修改失败")
            }
        }

        // 删除评论
        const handleDelete = (id) => {
            ElMessageBox.confirm(
                '是否确认删除该评论？',
                'Warning',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(async () => {
                await comments_store.deleteComments(id)
                ElMessage.success("删除成功")
                await handleQuery()
            })
                .catch((err) => {
                    ElMessage.error("取消删除")
                })
        }

        const changeValue = (name, value) => {
            commentsInfo.value[name] = value
        }

        const handleAdd = () => {
            comments_store.addComments().then(res => {
                ElMessage.success("新增评论成功！")
                comments_store.getCommentsList()
                visible.value = false
            })
        }

        const handleBtn = (name, row) => {
            if (name === 'view') {
                handleEdit(row.id)
            } else if (name === 'del') {
                handleDelete(row.id)
            }
        }

        const handleToolBar = (name) => {
            if (name === 'add') {
                visible.value = true
                diaTitle.value = '新增评论'
            }
        }

        onMounted(async () => {
            await handleQuery()
        })


        return () => {
            return (
                <>
                    <div className="app-container">
                        <SearchFrom
                            queryParams={queryParams}
                            handleQuery={handleQuery}/>
                        <TableList
                            tableData={commentsList.value}
                            handleSizeChange={handleSizeChange}
                            handleCurrentChange={handleCurrentChange}
                            handleBtn={handleBtn}
                            handleToolBar={handleToolBar}
                            header={header}
                            operateBtn={operateBtn}
                            total={total.value}
                            v-slots={{
                                nick_name: (row) => {
                                    return row.user_info.nick_name
                                },
                                comment_content: (row) => {
                                    return overflowHidden(row.comment_content)
                                },
                                createdAt: (row) => {
                                    return formatDateTime(row.createdAt)
                                },
                                updatedAt: (row) => {
                                    return formatDateTime(row.updatedAt)
                                }
                            }}
                        />
                        <Dialog
                            diaTitle={diaTitle.value}
                            visible={visible}
                            diaForm={commentsInfo.value}
                            isDetail={isDetail.value}
                            changeValue={changeValue}
                            handleAdd={handleAdd}
                            saveDia={saveDia}
                            closeDia={closeDia}
                        />
                    </div>
                </>
            )
        }
    }
})